<template>
  <div class="article_img">
    <div @click="dialogVisible = true">
      <img v-if="coverImage" :src="coverImage" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </div>
    <el-dialog title="封面图片" :visible.sync="dialogVisible" append-to-body>
      <!--
            ref 有两个作用
            1、作用到普通 HTML 标签上可以获取 DOM
            2、作用到组件上可以获取组件
      -->
      <image-list
        :is-show-add="false"
        :is-show-selected="true"
        ref="image-list"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onCoverConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImageList from "@/views/image/components/image-list";
export default {
  name: "ArticleImg",
  props: ["cover-image"],
  data() {
    return {
      dialogVisible: false,
    };
  },
  components: {
    ImageList,
  },
  methods: {
    onCoverConfirm() {
      const imageList = this.$refs["image-list"];
      const selected = imageList.selected;
      if (selected === null) {
        this.$message("请选择封面图片");
        return;
      }
      this.coverImage = imageList.images[selected].url;
      this.dialogVisible = false;
      // 修改父组件绑定数据
      this.$emit("updata-cover", imageList.images[selected].url);
    },
  },
};
</script>

<style scoped lang="less">
.avatar-uploader-icon {
  font-size: 28px;
  border: 1px dashed #797979;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  border: 1px dashed #797979;
  width: 178px;
  height: 178px;
  display: block;
}
</style>
